<template>
  <div class="breakEgg">
    <infoText ref="infoText" v-if="demoMode"></infoText>
    <alert ref="alertRef" @alertOff="alertOff" :source="source"></alert>
    <div class="position1">
      <img :src="obj.pageBg" alt="" />
    </div>
    <div class="position2">
      <div class="part0">
        <div class="part0Logo1" :style="`padding-top: ${obj.pageLogoTop}vh;`">
          <img width="100%" :src="obj.pageLogo" alt />
        </div>
      </div>
      <div v-if="gameData.breakAtk" :class="gameData.styleEl" class="part01" :style="`top: ${obj.maceTop}vh;`">
        <img :src="obj.mace" alt />
      </div>
      <div class="part1">
        <div class="part1B" :style="`bottom: ${obj.eggBotNum}vh`">
          <img :src="obj.eggBot" alt="" />
        </div>
        <div class="part1A">
          <div v-for="item in 5" :key="item" class="part11" :class="gameData.break ? `part11-${item} part11-num2` : `part11-${item} part11-num1`" @click="userClickFoo(item)">
            <img v-if="gameData.breakNum !== item" :src="obj.egg1" alt />
          </div>
        </div>
      </div>
      <div v-if="gameData.break && gameData.breakBigNum == 1" class="part3" :style="gameData.styleEl1">
        <img style="width: 100%;" :src="obj.egg1" alt />
      </div>
      <div class="part2" v-if="gameData.break">
        <div class="part2Wrap">
          <img v-if="gameData.breakBigNum == 2" class="part21B" :src="obj.egg2" alt />
          <img v-if="gameData.breakBigNum == 3" :src="obj.egg3" alt />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import $util from '../../utils'
import alert from '../../component/dialog/index1.vue'
import infoText from '../../component/infoText/index.vue'

export default {
  props: {
    source: {
      type: Object,
      default: () => {},
    },
    next: {
      type: Function,
      default: null,
    },
  },
  data() {
    return {
      door1: true,
      demoMode: true,
      gameData: {
        timer: null,
        break: false,
        breakNum: -1,
        breakAtk: true,
        breakBigNum: 1,
        styleEl: '',
        styleEl1: '',
      },
      obj: {},
    }
  },
  components: {
    alert,
    infoText,
  },
  mounted() {
    this.obj = {
      eggBot: require('./img1/bg1.png'),
      mace: require('./img1/chuizi1.png'),
      egg1: require('./img1/egg_a1.png'),
      egg2: require('./img1/egg_a2.png'),
      egg3: require('./img1/egg_a3.png'),
      pageBg: require('./img1/home_bg.png'),
      pageLogo: require('./img1/txt.png'),
      pageLogoTop: 10,
      eggBotNum: 0,
      maceTop: 35,
    }
    try {
      let fix1 = decodeURI(location.search)
        .split('#')[0]
        .split('?')[1]
      let qData = $util.StrQuery(fix1, 'qd')
      if (qData) {
        this.demoMode = false
        let obj1 = JSON.parse(qData)
        Object.assign(this.obj, obj1)
      }
    } catch (error) {}

    if (this.source) {
      this.demoMode = false
      Object.assign(this.obj, this.source)
    }

    console.log('====== 游戏参数 ======')
    console.log(this.obj)
    this.$refs.alertRef.reShow()

    this.reLuckBtn()

    if (this.next) {
      this.$store.dispatch('onUserLogSend', {
        pageName: '砸金蛋游戏首页',
        behavior: {
          visist: '进入页面',
        },
      })
    }
  },
  methods: {
    reLuckBtn() {
      this.gameData = {
        timer: null,
        break: false,
        breakNum: -1,
        breakAtk: true,
        breakBigNum: 1,
        styleEl: '',
        styleEl1: '',
      }
    },
    alertOff() {
      try {
        if (this.next) {
          this.next()
        } else {
          this.$parent.alertOff()
        }
      } catch (error) {
        this.door1 = true
      }
      this.reLuckBtn()
    },
    userClickFoo(i) {
      if (this.door1) {
        this.door1 = false
        try {
          if (this.next) {
            const success = (res) => {
              if (res.awardType) {
                this.userClickFoo1(i, res)
              } else {
                this.$refs.alertRef.popUpMsg(8)
              }
              return true
            }
            const fail = (err) => {
              this.door1 = true
              this.$refs.alertRef.popUpMsg(8, err.message)
              return true
            }
            this.next(success, fail)
            this.$store.dispatch('onUserLogSend', {
              pageName: '砸金蛋游戏首页',
              behavior: {
                click: '点击金蛋',
              },
            })
          } else {
            this.$parent
              .turnPreFoo()
              .then((res) => {
                if (this.gameData) {
                  this.$refs.alertRef.popUpMsg(6, res)
                }
              })
              .catch((err) => {
                this.door1 = true
                if (this.gameData) {
                  this.$refs.alertRef.popUpMsg(8, err)
                }
              })
          }
        } catch (error) {
          this.door1 = true
          this.userClickFoo1(i, '')
        }
      }
    },
    async userClickFoo1(i, msg) {
      let aa = document.querySelector(`.part11-${i}`)
      let bb = aa.getBoundingClientRect()
      if (bb.width < uni.upx2px(200) * 0.8) return
      this.gameData.styleEl1 = `
        width: ${bb.width}px;
        top: ${bb.top}px;
        left: ${bb.left}px;
      `
      // 点击获奖
      this.gameData.breakNum = i
      this.gameData.break = true
      await this.delayTime(100)
      this.gameData.styleEl1 = ``
      this.gameData.styleEl = 'part01A'
      await this.delayTime(600)
      this.gameData.breakBigNum = 1
      await this.delayTime(600)
      this.gameData.styleEl = ''
      this.gameData.breakBigNum = 2
      await this.delayTime(500)
      this.gameData.breakAtk = false
      await this.delayTime(500)
      if (msg) {
        this.$refs.alertRef.popUpMsg(6, msg.name)
      } else {
        this.$refs.alertRef.popUpMsg(8)
      }
    },
    delayTime(time) {
      // 异步延时
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve()
        }, time)
      })
    },
  },
}
</script>

<style lang="scss">
.breakEgg {
  position: relative;
  .position1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
  }

  .position1 img {
    width: 100%;
    height: 100%;
  }

  .position2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    .part0 {
      height: 44vh;
      .part0Logo1 {
        text-align: center;
        width: 580rpx;
        margin: 0 auto;
      }
    }
    .part01 {
      position: absolute;
      right: 0;
      width: 200rpx;
      transform-origin: 100% 100%;
      animation: move 2s infinite;
      transition: all 0.3s;
      z-index: 101;
      img {
        width: 100%;
      }
    }
    .part01A {
      right: 80rpx;
      top: 25vh !important;
      animation: none;
      width: 402rpx;
      z-index: 600;
      animation: moveRotate1 0.4s 3;
      transform: translate(76rpx, 180rpx) rotate(20deg);
    }
    .part1 {
      width: 750rpx;
      margin: 0 auto;
      height: 470rpx;
      position: relative;
      .part1B {
        position: absolute;
        left: 0;
        width: 100%;
        img {
          width: 100%;
        }
      }
      .part1A {
        position: absolute;
        top: 0;
        left: 0;
        .part11 {
          position: absolute;
          width: 200rpx;
          height: 260rpx;
          img {
            width: 100%;
          }
        }

        /*
          5个图x和y轴动画加起来是 10s
          10s/5 等于 2s
          每个球y轴动画延迟 从0递减2s
          x轴与y轴相差动画时长的一半 5s/2
        */
        .part11-1 {
          animation: animX 5s cubic-bezier(0.36, 0, 0.64, 1) -2.5s infinite alternate, animY 5s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate,
            scale 10s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
        }

        .part11-2 {
          animation: animX 5s cubic-bezier(0.36, 0, 0.64, 1) -4.5s infinite alternate, animY 5s cubic-bezier(0.36, 0, 0.64, 1) -2s infinite alternate,
            scale 10s cubic-bezier(0.36, 0, 0.64, 1) -2s infinite alternate;
        }

        .part11-3 {
          animation: animX 5s cubic-bezier(0.36, 0, 0.64, 1) -6.5s infinite alternate, animY 5s cubic-bezier(0.36, 0, 0.64, 1) -4s infinite alternate,
            scale 10s cubic-bezier(0.36, 0, 0.64, 1) -4s infinite alternate;
        }

        .part11-4 {
          animation: animX 5s cubic-bezier(0.36, 0, 0.64, 1) -8.5s infinite alternate, animY 5s cubic-bezier(0.36, 0, 0.64, 1) -6s infinite alternate,
            scale 10s cubic-bezier(0.36, 0, 0.64, 1) -6s infinite alternate;
        }

        .part11-5 {
          animation: animX 5s cubic-bezier(0.36, 0, 0.64, 1) -10.5s infinite alternate, animY 5s cubic-bezier(0.36, 0, 0.64, 1) -8s infinite alternate,
            scale 10s cubic-bezier(0.36, 0, 0.64, 1) -8s infinite alternate;
        }

        .part11-num1 {
          animation-play-state: running;
        }

        .part11-num2 {
          animation-play-state: paused;
        }
      }
    }

    .part2 {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 200;
      background: rgba(0, 0, 0, 0.5);
      .part2Wrap {
        position: absolute;
        top: 31vh;
        width: 540rpx;
        left: 50%;
        transform: translateX(-50%);
        z-index: 300;
        text-align: center;
      }

      img {
        width: 100%;
        vertical-align: bottom;
      }

      .part21B {
        transform-origin: 50% 100%;
        animation: moveLR 1.5s linear infinite;
      }
    }
    .part3 {
      position: fixed;
      z-index: 400;
      transition: all 0.3s;
      width: 400rpx;
      top: 35vh;
      left: calc(50vw - 200rpx);
    }
  }
}

@keyframes moveRotate1 {
  0% {
    transform: translate(76rpx, 180rpx) rotate(20deg);
  }

  50% {
    transform: translate(76rpx, 180rpx) rotate(40deg);
  }

  100% {
    transform: translate(76rpx, 180rpx) rotate(20deg);
  }
}

@keyframes move {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(-20deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

@keyframes animX {
  0% {
    left: 40rpx;
  }

  100% {
    left: 520rpx;
  }
}

@keyframes animY {
  0% {
    top: 40rpx;
  }

  100% {
    top: 140rpx;
  }
}

@keyframes scale {
  0% {
    transform: scale(0.65);
    z-index: 100;
  }

  50% {
    transform: scale(1);
    z-index: 200;
  }

  100% {
    transform: scale(0.65);
    z-index: 100;
  }
}

@keyframes moveLR {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-10deg);
  }
  50% {
    transform: rotate(0deg);
  }
  75% {
    transform: rotate(10deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
</style>
